<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            text-align: center;
        }
    </style>
    <!--1.引入bs的样式-->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!--2.引入jquery-->
    <script src="node_modules/jquery/jquery.min.js"></script>
    <!--3.引入bs的js库-->
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!--4.引入vue-->
    <script src="node_modules/vue/vue.min.js"></script>
    <!--5.引入axios-->
    <script src="node_modules/axios/axios.min.js"></script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">种类</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-hover table-bordered">
                        <tr v-for="c in categorys">
                            <td @click="tiaozhuan(c.cid)"><a href="#" class="btn btn-warning" >{{c.catename}}</a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">图书管理系统</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered table-hover table-striped">
                        <tr>
                            <td>书号</td>
                            <td>书名</td>
                            <td>作者</td>
                            <td>出版社</td>
                            <td>价格</td>
                            <td>会员价</td>
                            <td>会员折扣</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="b in books">
                            <td>{{b.bid}}</td>
                            <td>{{b.bookname}}</td>
                            <td>{{b.author}}</td>
                            <td>{{b.publisher}}</td>
                            <td>{{b.price}}</td>
                            <td>{{b.vipprice}}</td>
                            <td>{{b.viplevel}}</td>
                            <td>
                                <a href="" class="btn btn-success btn-md" data-toggle="modal" href="#modal-id" @click="updatebook(b)">修改</a>
                                <a href="" class="btn btn-danger btn-md" @click="dele(b)">删除</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal fade" id="modal-id">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                                </button>
                                <h4 class="modal-title">书籍管理</h4>
                            </div>
                            <div class="modal-body">
                                <form action="" method="post" class="form-horizontal" role="form">
                                    <div class="form-group">
                                        {{bookAll}}
                                        <label class="col-sm-2 control-label">书名:</label>
                                        <div class="col-sm-8">
                                            <input type="text" v-model="bookAll.bookname" class="form-control" placeholder="书名">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">作者:</label>
                                        <div class="col-sm-8">
                                            <input type="text" v-model="bookAll.author" class="form-control" placeholder="作者">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">出版社:</label>
                                        <div class="col-sm-8">
                                            <input type="text" v-model="bookAll.publisher" class="form-control" placeholder="出版社">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">价格:</label>
                                        <div class="col-sm-8">
                                            <input type="text" v-model="bookAll.price" class="form-control" placeholder="价格">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员价:</label>
                                        <div class="col-sm-8">
                                            <input type="text" v-model="bookAll.vipprice" class="form-control" placeholder="会员价">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">会员折扣:</label>
                                        <div class="col-sm-8">
                                            <input type="text" v-model="bookAll.viplevel" class="form-control" placeholder="会员折扣">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">种类:</label>
                                        <div class="col-sm-8">
                                            <select name="name" id="inputID" v-model="bookAll.cid" class="form-control">
                                                <option v-for="c in categorys" :value="c.cid"> {{c.catename}}</option>
                                            </select>
                                        </div>
                                    </div>


                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" @click="save()">保存</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
                <div class="panel-footer">
                    <a class="btn btn-primary" data-toggle="modal" href="#modal-id" @click="bookAll={}">添加书籍</a>
                    YYY图书馆
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    let vs=new Vue({
        el:'.container',
        data:{
            books:[],
            categorys:[],
            bookAll:{}
        },
        mounted(){
            this.findAllbooks(1);
            this.findCate();
        },
        methods:{
            findAllbooks(c){
                axios.post("/book/list?cid="+c).then(response=>{
                    this.books=response.data;
                    console.log(response.data)
                })
            },
            findCate(){
                axios.post("/cate/list").then(response=>{
                    this.categorys=response.data;
                    console.log(response.data)
                })
            },
            tiaozhuan(c){
                this.findAllbooks(c);
            },
            updatebook(b){
                $(".modal").modal("show");
                this.bookAll=b;
            },
            save(){
                let url="/book/add";
                if (this.bookAll.bid){
                    url="/book/update";
                }
                // 将Json对象装成字符串
                axios.post(url,this.bookAll).then(response=>{
                    if(response.data.success){  //操作成功，刷新页面
                        this.findAllbooks(this.bookAll.cid);
                    }else{
                        alert(response.data.message);
                    }
                    $(".modal").modal("hide");
                })
            },
            dele(b){
                axios.post("book/delete?bid="+b.bid).then(response=>{
                    this.findAllbooks(b.cid);
                })
            }
        }
    })
</script>